<!doctype html>
<html class="no-js" lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>联系我们</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/localpic/103.jpg}">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/assets/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/assets/css/font.awesome.css}">
    <!--ionicons css-->
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <!--7 stroke icons css-->
    <link rel="stylesheet" th:href="@{/assets/css/pe-icon-7-stroke.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

</head>

<body>

<!--header area start-->

<!--offcanvas menu area start-->
<div class="off_canvars_overlay">

</div>

<!--offcanvas menu area end-->


<!--header area end-->
<!--<div class="contact_map">-->
    <!--    <div class="map-area">-->
    <!--        <div id="googleMap"></div>-->
    <!--    </div>-->
    <!--</div>-->
    <!--breadcrumbs area start-->
<div class="breadcrumbs_area  breadcrumbs_bg" style="padding: 10px 0px">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb_content">
                    <h3>联系我们</h3>
                    <ul>
                        <li><a th:href="@{/}">回到首页</a></li>
                        <li>联系我们</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumbs area end-->

<!--contact map start-->
<!---->
<!--contact map end-->

<!--contact area start-->
<div class="contact_area">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="contact_message content">
                    <h3>联系我们</h3>
                    <p>这是一个旨在帮助留守儿童的网站，在此平台上乡村教师可以直接发布信息给所有愿意帮助他们的好心人</p>
                    <ul>
                        <li><i class="fa fa-fax"></i>  地址 : XXX路XX号楼</li>
                        <li><i class="fa fa-phone"></i> <a href="#">123456789</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="tel:0(1234)567890">user@qq.com</a>  </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="contact_message form">
                    <h3>告诉我们</h3>
                    <form id="contact-form" method="POST"  th:action="@{/info/contactUs}">
                        <p>
                            <label>  主题</label>
                            <input name="subject" placeholder="主题 *" type="text">
                        </p>
                        <div class="contact_textarea">
                            <label>  内容</label>
                            <textarea placeholder="内容 *" name="message"  class="form-control2" ></textarea>
                        </div>
                        <button type="submit"> 发送</button>
                        <p class="form-messege"></p>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<!--contact area end-->

<!--footer area start-->

<!--footer area end-->

<!-- JS
============================================ -->

<!--map js code here-->
<script src="https://ditu.google.cn/maps/api/js?sensor=false&amp;libraries=geometry&amp;v=3.22&amp;key=AIzaSyChs2QWiAhnzz0a4OEhzqCXwx_qA9ST_lE"></script>
<script  src="https://www.google.com/jsapi"></script>
<script th:src="@{/assets/js/map.js}"></script>


<!-- JS
============================================ -->
<!--jquery min js-->
<script th:src="@{/assets/js/vendor/jquery-3.5.0.min.js}"></script>
<!--popper min js-->
<script th:src="@{/assets/js/popper.js}"></script>
<!--bootstrap min js-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--owl carousel min js-->
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<!--slick min js-->
<script th:src="@{/assets/js/slick.min.js}"></script>
<!--magnific popup min js-->
<script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
<!--jquery countdown min js-->
<script th:src="@{/assets/js/jquery.countdown.js}"></script>
<!--jquery ui min js-->
<script th:src="@{/assets/js/jquery.ui.js}"></script>
<!--jquery elevatezoom min js-->
<script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
<!--isotope packaged min js-->
<script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<!-- Plugins JS -->
<script th:src="@{/assets/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>


</body>

</html>